<template>
  <a-card title="事项配置" :bordered="false" class="sub-content__body">
    <a-steps :current="1" size="small" class="steps">
      <a-step title="基础信息"></a-step>
      <a-step title="联系方法"></a-step>
      <a-step title="个人设置"></a-step>
      <a-step title="配置成功"></a-step>
    </a-steps>
    <a-form :form="form" class="form" @submit="handleSubmit">
      <a-form-item
        label="普通输入框"
        :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapper-col="{ lg: { span: 10 }, sm: { span: 17 } }"
      >
        <a-input
          v-decorator="[
            '普通输入框',
            {
              rules: [
                {
                  required: true,
                  message: '请输入信息'
                }
              ]
            }
          ]"
          placeholder="请输入"
        />
      </a-form-item>
      <a-form-item
        :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapper-col="{ lg: { span: 10 }, sm: { span: 17 } }"
      >
        <span slot="label">
          带图标输入框&nbsp;
          <a-tooltip title="What do you want others to call you?">
            <a-icon type="info-circle" />
          </a-tooltip>
        </span>
        <a-input
          v-decorator="[
            '带图标输入框',
            {
              rules: [
                {
                  required: true,
                  message: '请在带图标输入框输入信息!',
                  whitespace: true
                }
              ]
            }
          ]"
          placeholder="请输入"
          @change="handleWebsiteChange"
        >
          <a-icon slot="prefix" type="user" />
        </a-input>
      </a-form-item>
      <a-form-item
        label="带前缀输入框"
        :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapper-col="{ lg: { span: 10 }, sm: { span: 17 } }"
      >
        <a-input addon-before="https://" placeholder="请输入" />
      </a-form-item>
      <a-form-item
        label="文本域"
        :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapper-col="{ lg: { span: 10 }, sm: { span: 17 } }"
      >
        <a-textarea placeholder="请输入" :row="4"></a-textarea>
      </a-form-item>
      <a-form-item
        label="普通下拉框"
        :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapper-col="{ lg: { span: 10 }, sm: { span: 17 } }"
      >
        <a-select
          v-decorator="[
            '下拉框',
            {
              rules: [
                {
                  type: '',
                  message: '请选择信息'
                },
                {
                  required: true,
                  message: '请选择信息'
                }
              ]
            }
          ]"
          placeholder="请选择"
        >
          <a-select-option value="male">
            男
          </a-select-option>
          <a-select-option value="female">
            女
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
        label="数字输入框"
        :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapper-col="{ lg: { span: 10 }, sm: { span: 17 } }"
      >
        <a-input-number
          v-decorator="[
            'numInput',
            {
              initialValue: '1',
              rules: [{ required: true, message: '请输入' }]
            }
          ]"
          :min="1"
          :max="100"
          @change="onNumChange"
        >
        </a-input-number>
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="日期选择器">
        <a-date-picker
          v-decorator="[
            '日期选择器',
            { rules: [{ required: true, message: '请选择' }] }
          ]"
          placeholder="请选择日期"
          @change="onDateChange"
        ></a-date-picker>
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="开关">
        <a-switch
          v-decorator="[
            'switch',
            { rules: [{ required: true, message: '请选择' }] }
          ]"
          default-checked
        ></a-switch>
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="日期区间选择器">
        <a-range-picker
          v-decorator="[
            'datePicker',
            { rules: [{ required: true, message: '请选择' }] }
          ]"
          :placeholder="['开始日期', '结束日期']"
        ></a-range-picker>
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="单选框">
        <a-radio-group
          v-decorator="[
            'radio',
            { rules: [{ required: true, message: '请选择' }] }
          ]"
          name="radioGroup"
          @change="onRadioChange"
        >
          <a-radio :value="1">A</a-radio>
          <a-radio :value="2">B</a-radio>
          <a-radio :value="3">C</a-radio>
          <a-radio :value="4">D</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="多选框">
        <a-checkbox-group
          v-decorator="[
            'checkbox',
            { rules: [{ required: true, message: '请选择' }] }
          ]"
          @change="onCheckboxChange"
        >
          <a-row>
            <a-checkbox value="A">A</a-checkbox>
            <a-checkbox value="B">B</a-checkbox>
            <a-checkbox value="C">C</a-checkbox>
            <a-checkbox value="D">D</a-checkbox>
          </a-row>
        </a-checkbox-group>
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 20 }" style="text-align: center">
        <a-button type="primary" html-type="submit">
          下一步
        </a-button>
        <a-button style="margin-left:8px">
          上一步
        </a-button>
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script>
export default {
  name: 'Form',
  data() {
    return {
      description: '这是一个填写表单页面',
      formItemLayout: {
        labelCol: {
          xs: { span: 7 },
          sm: { span: 7 }
        },
        wrapperCol: {
          xs: { span: 10 },
          sm: { span: 17 }
        }
      },
      tailFormItemLayout: {
        wrapperCol: {
          xs: {
            span: 12,
            offset: 0
          },
          sm: {
            span: 8,
            offset: 4
          }
        }
      }
    }
  },
  beforeCreate() {
    this.form = this.$form.createForm(this)
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault()
      console.log('this.form:', this.form)
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values)
        }
      })
    },
    handleWebsiteChange(value) {
      let autoCompleteResult
      if (!value) {
        autoCompleteResult = []
      } else {
        autoCompleteResult = ['.com', '.org', '.net'].map(
          domain => `${value}${domain}`
        )
      }
      this.autoCompleteResult = autoCompleteResult
    },
    onDateChange(date, dateString) {
      console.log(date, dateString)
    },
    onNumChange() {
      console.log('num')
    },
    onRadioChange(e) {
      console.log('radio checked:', e.target.value)
    },
    onCheckboxChange(checkedValues) {
      console.log('checkedValues:', checkedValues)
    }
  }
}
</script>
<style lang="scss" scoped>
.steps {
  max-width: 750px;
  margin: 20px auto 32px auto;
}
</style>
